const path = require('path') // node.js 核心模块，处理路径
const { VueLoaderPlugin } = require('vue-loader') // vue-loader 插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // css 提取插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const webpackMerge = require('webpack-merge').default

const baseConfig = {
  // 模式
  mode: process.env.NODE_ENV, // development | production 开发和生产模式
  // 入口
  entry: {
    'index': path.join(__dirname, 'src/index.js') // 入口文件
  },
  // 打包输出位置
  output: {
    path: path.join(__dirname, 'dist'), // 输出路径
    filename: '[name].js' // 输出文件名
  },
  // 模块(不同文件采用不同的loader处理)
  module: {
    rules: [
      {
        test: /\.vue$/, // 处理 .vue 文件
        use: [
          'vue-loader'
        ]
      },
      {
        test: /\.(css|less)$/, // 处理 .css 文件
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  // 插件
  plugins: [
    new VueLoaderPlugin(), // vue-loader 插件
    new MiniCssExtractPlugin({ // css 提取插件
      filename: '[name].css' // 输出的 css 文件名
    })
  ],
  // “排除打包”处理
  externals: {
    vue: 'window.Vue' // 外部引入 Vue 库
  }
}

// 开发环境配置
if (process.env.NODE_ENV === 'development') {
  config = webpackMerge(baseConfig, {
    devtool: 'inline-cheap-module-source-map',
    devServer: {
      static: {
        directory: path.join(__dirname),
      },
      compress: false,
      port: 9000,
      hot: false
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Webpack Vue App', // 设置生成的 html 文件的标题
        filename: 'index.html', // 输出的文件名
        template: './index.html', // 指定模板文件
        minify: false, // 是否压缩
        inject: false, // 脚本插入位置，true/'head'/'body'/false
        templateParameters: {
          publicPath: path.join(__dirname), // 公共路径
          js: [
            './node_modules/vue/dist/vue.runtime.global.js',
            './index.js'
          ],
          css: ['./index.css']
        }
      })// 生成 html 文件插件
    ],
  })
} else {
  config = webpackMerge(baseConfig, {
    optimization: {
      minimizer: [
        new TerserPlugin({}),
        new CssMinimizerPlugin({})
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Webpack Vue App', // 设置生成的 html 文件的标题
        filename: 'index.html', // 输出的文件名
        template: './index.html', // 指定模板文件
        minify: false, // 是否压缩
        inject: false, // 脚本插入位置，true/'head'/'body'/false
        templateParameters: {
          publicPath: path.join(__dirname), // 公共路径
          js: [
            'https://unpkg.com/vue@3.2.37/dist/vue.runtime.global.js',
            './index.js'
          ],
          css: ['./index.css']
        }
      })// 生成 html 文件插件
    ],
  })
}
module.exports = config // 导出配置